import { Row, Col, Button, Result } from 'antd';
import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import styles from './styles.less';
import router from 'umi/router';

// 这里应该使用 antd 的 404 result 组件，
// 但是还没发布，先来个简单的。

@connect(({ buy }) => ({ ...buy.view }))
class Details extends React.Component {
  render() {
    const {
      id,
      type,
      typeName,
      staffId,
      staffName,
      wineId,
      wineName,
      companyPrice,
      companySalePrice,
      staffPrice,
      freight,
      dealTime,
      freightComments,
      quantity,
      quantityComments,
      comments,
      companyProfit,
      staffProfit,
    } = this.props;
    return (
      // <PageHeaderWrapper title={'订单详情'}>
      <div className={styles.detail}>
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={4} style={{ textAlign: 'right', minWidth: '120px', fontWeight: 'bold' }}>
            订单号：
          </Col>
          <Col span={7}>{id}</Col>
        </Row>
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={4} style={{ textAlign: 'right', minWidth: '120px' }}>
            人员：
          </Col>
          <Col span={7}>{staffName}</Col>
        </Row>
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={4} style={{ textAlign: 'right', minWidth: '120px' }}>
            <div>商品名：</div>
          </Col>
          <Col>{wineName}</Col>
        </Row>
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={4} style={{ textAlign: 'right', minWidth: '120px' }}>
            <div>公司核定买入价：</div>
          </Col>
          <Col>{companyPrice}</Col>
        </Row>
        {type === 0 ? (
          <Row style={{ padding: '8px 0', fontSize: '16px' }}>
            <Col span={4} style={{ textAlign: 'right', minWidth: '120px' }}>
              <div>员工买入单价：</div>
            </Col>
            <Col>{staffPrice}</Col>
          </Row>
        ) : null}
        {type === 1 ? (
          <Row style={{ padding: '8px 0', fontSize: '16px' }}>
            <Col span={4} style={{ textAlign: 'right', minWidth: '120px' }}>
              <div>公司核定销售价：</div>
            </Col>
            <Col>{companySalePrice}</Col>
          </Row>
        ) : null}
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={4} style={{ textAlign: 'right', minWidth: '120px' }}>
            <div>数量：</div>
          </Col>
          <Col>{quantity}</Col>
        </Row>
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={4} style={{ textAlign: 'right', minWidth: '120px' }}>
            <div>其它费用：</div>
          </Col>
          <Col>{freight}</Col>
        </Row>

        {/* <Row style={{ padding: '8px 0', fontSize: '16px' }}>
            <Col span={4} style={{ textAlign: 'right', minWidth: '120px' }}>
              <div>利润分成比：</div>
            </Col>
            <Col>{companyProfitProportion}</Col>
          </Row> */}
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={4} style={{ textAlign: 'right', minWidth: '120px' }}>
            <div>员工利润：</div>
          </Col>
          <Col>{staffProfit}</Col>
        </Row>
        <Row style={{ padding: '8px 0', fontSize: '16px' }}>
          <Col span={4} style={{ textAlign: 'right', minWidth: '120px' }}>
            <div>公司利润：</div>
          </Col>
          <Col>{companyProfit}</Col>
        </Row>
      </div>
      // </PageHeaderWrapper>
    );
  }
}
export default Details;
